iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0

[程式碼&DEMO] [HackMD完整筆記]

目標


用JS與CSS去作一個即時的濾淨效果(調整內距、模糊、邊框色)。

步驟流程



學習筆記


CSS 變數

可在:root命名變數,變全域的變數,也可在任意的選擇器內命名變數。
變數命名的規則為:- -變數名
在要呼叫變數的選擇器裡面,使用var()呼叫該變數,可以把它想成 function。

img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

利用 JavaScript 讀寫 CSS 變數

讀取:getPropertyValue()
寫入:setProperty()

.setProperty()

語法:

style.setProperty(propertyName, value, priority);

參數:

propertyName : 一定要有,一個DOMString ,代表被更改的CSS屬性。

value: 一個DOMString,表示新的屬性值。如果没有指定,則當作空字符串。

priority : 一個DOMString 可設置 "important" CSS 優先级。如果没有指定,則當作空字符串。

程式碼

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);  
/* 等同於 */
style.`--${this.name}`= this.value + this.dataset.sizing;

//////////* EXample: *///////////
<style>:root {--blur: 10px;}<\style>

style.setProperty('--blur', '15px');
/* 等同於 */
<style>:root {--blur: 15px;}<\style>

:root

這個偽元素匹配的是文檔的根元素,也就是 標籤。常用於聲明全局的 CSS 變量。

dataset

用dataset可以取出對象的data-*屬性,也等同於getAttribute。

程式碼

<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
function handleUpdate() {const suffix = this.dataset.sizing || '';}
//也等於function handleUpdate() {const suffix = this.getAttribute('data-sizing')||'';}            

filter:blur()

CSS3的濾鏡功能,blur是高斯模糊,參數越高越模糊。

querySelectorAll()

回傳文檔中指定CSS選擇器的所有符合的元素,回傳的是一個靜態的 NodeList。

NodeList 和 Array 的區别

NodeList有length屬性,打開 proto 查看它的方法,有forEach()、item()、keys()、values()、entries()。但沒有Array 的 prototype 中才有的 map()、pop() 等方法。

箭頭函式(Arrow Function)

箭頭函式的this指向在【定義的時候】繼承自外層第一個普通函式的this。
外層沒有普通函式繼承,它this指向 window (全域性物件) 。

更多參考: http://xbhong.top/2018/04/10/arrowFunction/


上一篇
[JS30]DAY2 : JS and CSS Clock
下一篇
[JS30]DAY4 : Array Cardio Day 1
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言